<template>
	<view class="main">
		<view class="order">
			<view class="item">
				<view class="title">
					订单号
				</view>
				<view class="value">
					{{orderId}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					订单名
				</view>
				<view class="value">
					{{vipData.name}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					订单价格
				</view>
				<view class="value">
					￥{{vipData.money}}
				</view>
			</view>


		</view>
		<view class="pay">
			<view class="title">
				请选择支付方式
			</view>
			<view class="pay-type">
				<!-- 	<view class="item">
					<image class="icon" src="../../static/balance.png" mode="widthFix"></image>
					<view class="title">
						余额支付
					</view>
					<image class="icon not" src="../../static/un-select.png" mode="widthFix"></image>
				</view> -->
				<view class="item">
					<image class="icon" src="../../static/wx.png" mode="widthFix"></image>
					<view class="title">
						微信支付
					</view>
					<image class="icon left" src="../../static/selected.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="price">
				商品总价<text class="money">￥{{vipData.money}}</text>
			</view>
			<view class="confirm" @click="buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		buyVip,
		confirmOrder,
		payStatus
	} from "@/api/index.js"
	export default {
		data() {
			return {
				code: "",
				vipData: "",
				orderId: '',
				payData: "",
				checkOrderStatus: null
			};
		},
		onLoad(option) {
			this.code = option.code
			this.orderId = option.orderId
			this.vipData = JSON.parse(option.vipData)
			if (this.code) {
				this.buy()
			}
			console.log(option.item)
		},
		mounted() {

		},
		destroyed() {
			clearInterval(this.checkOrderStatus);
			this.checkOrderStatus = null

		},
		methods: {
			//判断是否支付
			isPay() {
				let that = this
				this.checkOrderStatus = setInterval(() => {
					let params = {
						order_id: that.orderId
					}
					payStatus(params).then(res => {
						if (res.data && res.data.status) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					})
				}, 1000);

			},
			buy() { // 非静默授权，第一次有弹框\
				let that = this
				const local = encodeURIComponent(window.location.href)
				if (this.code == null || this.code === '') {
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxce2140ef77e2dfc8&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
				} else {
					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', this
								.onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
						}
					} else {
						this.onBridgeReady()
					}
				}
			},
			onBridgeReady() {
				buyVip({
					code: this.code,
					order_id: this.orderId
				}).then(res => {
					if (res.code == 1) {
						console.log('data0000', res.msg)
						this.isPay()
						this.payData = res.msg
						WeixinJSBridge.invoke('getBrandWCPayRequest', {
								"appId": this.payData.appId, //公众号ID，由商户传入    
								"timeStamp": this.payData.timeStamp, //时间戳，自1970年以来的秒数    
								"nonceStr": this.payData.nonceStr, //随机串    
								"package": this.payData.package,
								"signType": this.payData.signType, //微信签名方式：    
								"paySign": this.payData.paySign //微信签名
							},
							function(res) {
								uni.showToast({
									title: res,
									duration: 20000
								});
								if (res.err_msg == "get_brand_wcpay_request:ok") {

									uni.navigateTo({
										url: "/pages/index/index"
									})

									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								} else if (res.err_msg == "get_brand_wcpay_request:fail") {
									// 支付失败
									alert("支付失败，请重试！");
									uni.navigateBack(-1)
								} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
									// 支付取消
									alert("支付取消！");
									uni.navigateBack(-1)
								} else {
									// 其他错误
									alert("支付过程中出现错误，请重试！");
									uni.navigateBack(-1)
								}
							});



					}
				})
			}

		},

	}
</script>

<style lang="scss">
	.main {
		background: #fff
	}

	.order {
		.item {
			padding: 20rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ECECEC;

			.title {
				color: #797979;
				font-display: 28rpx;
			}

			.value {
				color: #333;
				font-size: 28rpx;
			}
		}
	}

	.pay {
		.title {
			font-size: 28rpx;
			padding: 26rpx;
		}

		.pay-type {
			.item {
				padding: 10rpx 26rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ECECEC;

				.title {
					flex: 1
				}

				.icon {
					width: 46rpx;

				}

				.not {
					width: 48rpx;
				}

			}
		}
	}

	.buy {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.price {
			margin-left: 26rpx;
			font-size: 28rpx;
			color: #333;

			.money {
				color: #DE2219;
				margin-left: 10rpx;
				font-weight: 600;
				font-size: 32rpx;
			}
		}

		.confirm {
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			background-color: #3187D4;
		}
	}
</style>